<toaster-container></toaster-container>
<div class="row mb-2">
    <a href="javascript:;" class="text-link" [routerLink]="['../../']">
        <i class="ti-arrow-left"></i> Back to Events
    </a>
</div>
<div class="row mt-2">
    <div *ngIf="event" class="col-md-5">
        <h3>
            <span *ngIf="edit == 'false'">Add</span>
            <span *ngIf="edit == 'true' && canEdit">Edit</span>
            <span *ngIf="edit == 'true' && !canEdit">Details Of</span> 
            Event
        </h3>
        <dl>
            <dt>Event Name*</dt>
            <dd>
                <input *ngIf="canEdit" [(ngModel)]="event.name" class="form-control">
                <span *ngIf="!canEdit">{{event.name}}</span>
            </dd>
            <dt>Event Location*</dt>
            <dd>
                <input *ngIf="canEdit" [(ngModel)]="event.location" class="form-control">
                <span *ngIf="!canEdit">{{event.location}}</span>
            </dd>
            <dt>Start Date*</dt>
            <dd>
                <div *ngIf="canEdit" class="form-group">
                    <input class="form-control" bsDatepicker [bsConfig]="{ containerClass: 'theme-default' }" [(ngModel)]="event.startDate">
                </div>
                <span *ngIf="!canEdit">{{event.startDate | date: 'dd-MM-yyy'}}</span>
            </dd>
            <dt>End Date*</dt>
            <dd>
                <div *ngIf="canEdit" class="form-group">
                    <input class="form-control" bsDatepicker [bsConfig]="{ containerClass: 'theme-default' }" [(ngModel)]="event.endDate">
                </div>
                <span *ngIf="!canEdit">{{event.endDate | date: 'dd-MM-yyy'}}</span>
            </dd>
            <dt>Presenter</dt>
            <dd>
                <input *ngIf="canEdit" [(ngModel)]="event.presenter" class="form-control">
                <span *ngIf="!canEdit">{{event.presenter}}</span>
            </dd>
            <dt>Sponsorship</dt>
            <dd>
                <div class="row">
                    <div class="col-md-6">Yes</div>
                    <div class="col-md-6">No</div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <ui-switch size="small" [checked]="event.sponsorship" (change)="event.sponsorship = !event.sponsorship"
                            [disabled]="!canEdit || event.sponsorship"></ui-switch>
                    </div>
                    <div class="col-md-6">
                        <ui-switch size="small" [checked]="!event.sponsorship" (change)="event.sponsorship = !event.sponsorship"
                            [disabled]="!canEdit || !event.sponsorship"></ui-switch>
                    </div>
                </div>
            </dd>
        </dl>
        <div *ngIf="canEdit" class="row mt-2">
            <button class="btn btn-primary-dark" (click)="publishEvent()">
                Publish
            </button>
            <button class="btn btn-primary-dark ml-1" (click)="saveEvent()">
                Save as Draft
            </button>
        </div>
    </div>
    <div class="col-md-7">
        <h5>Body of Event</h5>
        <quill-editor *ngIf="event" [modules]="quillOptions" [(ngModel)]="event.body" [readOnly]="!canEdit"></quill-editor>
    </div>
</div>

